<template>
	<view>
		<view class="select-item" v-for="(item, index) in spesData" :key="index">
			<view class="coreshop-text-black u-margin-10  coreshop-solid-bottom u-padding-bottom-20">{{ index }}</view>
			<view class="select-btn">
				<button class="sku-btn u-margin-10" :class="spes.cla" v-for="(spes, key) in item" :key="key"
					@click="specChangeSpes(index, key,spes)">
					<!-- <u-avatar :src="spes.image" size="50" class="u-margin-right-10 u-margin-top-10"
						style="margin-left: -20rpx;"></u-avatar> -->
					{{ spes.name }}
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "spec",
		data() {
			return {
				spesData: {}
			}
		},
		props: {
			// 默认picker选中项索引
			spesData: {
				required: true
			}
		},
		watch: {
			spesData: function(val) {
				let d = JSON.parse(val);
				console.log('aboooc', d)
				this.spesData = d;
			}
		},
		// created() {
		// 	this.list = this.$props.spesData;
		// }
		methods: {
			specChangeSpes(v, k, spes) {
				let newData = {
					v: v,
					k: k
				}
				this.$emit("changeSpes", newData);
			},
			changeSpecData() {
				this.spesData = {}
			},
			setSpecData(data) {
				console.log('aaa', data)
				this.spesData = data
			}
		}
	}
</script>
<style scoped lang="scss">
	.selected {
		border: 2upx solid #ff0000;
		background-color: #fff5f6;
		color: #ff0000;
	}

	.not-selected {
		border: 2upx solid #ccc;
	}

	.none {
		border: 2upx dashed #ccc;
		color: #888;
		display: none;
	}
</style>